<template>
    <div>
        <!-- 普通新闻 -->
        <div class="normalPost" v-if="postData.type == 1">
            <div class="header">
                <div class="icons">
                    <span class="iconfont iconjiantou2"></span>
                    <span class="iconfont iconnew"></span>
                </div>
                <div
                    @click="handleFollow"
                    class="btnFollow"
                    :class="{
                        unfollow: !postData.has_follow,
                    }"
                >
                    {{ postData.has_follow ? "已关注" : "关注" }}
                </div>
            </div>

            <div class="title">
                {{ postData.title }}
            </div>
            <div class="info">
                {{ postData.user.nickname }}
                {{
                    postData.create_date
                        ? postData.create_date.split("T")[0]
                        : ""
                }}
            </div>

            <div class="content" v-html="postData.content"></div>
        </div>

        <!-- 视频新闻 -->
        <div class="videoPost" v-if="postData.type == 2">
            <video
                src="https://video.pearvideo.com/mp4/adshort/20200421/cont-1670293-15098199_adpkg-ad_hd.mp4"
                controls
                poster="https://timgmb04.bdimg.com/timg?searchbox_feed&quality=100&wh_rate=0&size=b576_324&ref=http%3A%2F%2Fwww.baidu.com&sec=1568739067&di=612dd27cae470b93b01a4b32ef72fbac&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fe18c6ffa079441431f8988ca4c3ac106.jpeg"
            ></video>

            <div class="info">
                <img src="@/assets/avatar.jpg" alt="" class="avatar" />
                <div class="name">{{ postData.user.nickname }}</div>
                <div
                    @click="handleFollow"
                    class="btnFollow"
                    :class="{
                        unfollow: !postData.has_follow,
                    }"
                >
                    {{ postData.has_follow ? "已关注" : "关注" }}
                </div>
            </div>
            <div class="title">{{ postData.title }}</div>
        </div>

        <div class="btns">
            <div
                class="btn dianzan"
                :class="{ haslike: postData.has_like }"
                @click="handleLike"
            >
                <span class="iconfont icondianzan"></span>
                {{ postData.like_length }}
            </div>
            <div class="btn weixin">
                <span class="iconfont iconweixin"></span>
                微信
            </div>
        </div>

        <div class="commentList">
            <h2>精彩跟帖</h2>
            <CommentMain
                v-for="comment in commentList"
                :key="comment.id"
                :commentData="comment"
            />
            <div
                class="btnMoreComment"
                @click="$router.push('/morecomment?id=' + $route.query.id)"
            >
                更多跟帖
            </div>
        </div>
        <CommentInputDom @reloadComment="loadComment" />
    </div>
</template>

<script>
    import CommentMain from "../components/comment/main";
    import CommentInputDom from "../components/comment/inputDom";
    export default {
        data() {
            return {
                postData: {},
                commentList: [],
            };
        },
        components: {
            CommentMain,
            CommentInputDom,
        },
        created() {
            console.log(this.$route.query.id);
            this.loadPage();
            this.loadComment();
        },
        methods: {
            loadPage() {
                this.$axios({
                    url: "/post/" + this.$route.query.id,
                }).then((res) => {
                    console.log(res.data);
                    this.postData = res.data.data;
                });
            },
            loadComment() {
                // 页面详情页除了获取文章详情, 还需要获取当前文章的评论列表
                this.$axios({
                    url: "/post_comment/" + this.$route.query.id,
                }).then((res) => {
                    console.log(res.data.data);

                    // 如果评论超过三条, 强制截取
                    if (res.data.data.length > 3) {
                        res.data.data.length = 3;
                    }

                    this.commentList = res.data.data;
                });
            },
            handleLike() {
                // 点赞虽然是双向, 可以点赞也可以取消
                // 但是后台只给了一个接口,
                this.$axios({
                    url: "/post_like/" + this.$route.query.id,
                }).then((res) => {
                    console.log(res.data);
                    // 点赞完毕直接加载数据是可以的
                    // this.loadPage()
                    // 也可以直接手动改数据
                    if (res.data.message == "点赞成功") {
                        this.postData.like_length += 1;
                        this.postData.has_like = true;
                    } else {
                        this.postData.like_length -= 1;
                        this.postData.has_like = false;
                    }
                });
            },
            handleFollow() {
                // 这里是关注按钮被点击,
                // 但是关注和取消关注是同一个按钮, 不同的接口
                // 我们需要自己判断,到敌法哪一个
                // 1. 如果已关注就取消,
                // 2. 没关注, 就关注
                if (this.postData.has_follow) {
                    this.$axios({
                        url: "/user_unfollow/" + this.postData.user.id,
                    }).then((res) => {
                        console.log(res.data);
                        this.postData.has_follow = false;
                        // 重新加载数据, 也是可以的
                        // this.loadPage()
                    });
                } else {
                    this.$axios({
                        url: "/user_follows/" + this.postData.user.id,
                    }).then((res) => {
                        console.log(res.data);
                        this.postData.has_follow = true;
                    });
                }
                // 关注和取消关注以后, 有两种可能性
                // 1. 重新加载数据
                // 准确性有保障, 多一次请求 适合一些比较注意准确的数据
                // 2. 手动直接改数据
                // 准确性低一些, 效率更高
            },
        },
    };
</script>

<style lang="less" scoped>
    .normalPost {
        padding: 0 20/360 * 100vw;
        .header {
            display: flex;
            align-items: center;
            .icons {
                flex: 1;
                display: flex;
                align-items: center;
                .iconnew {
                    font-size: 54/360 * 100vw;
                    padding-left: 10/360 * 100vw;
                }
            }
        }
        .title {
            font-size: 16/360 * 100vw;
            font-weight: 700;
        }
        .info {
            font-size: 14/360 * 100vw;
            color: #888;
            padding: 10/360 * 100vw 0;
        }

        .content {
            /deep/ img {
                max-width: 100%;
            }
        }
    }
    .videoPost {
        video {
            width: 100%;
        }
        .info {
            padding: 10/360 * 100vw 20/360 * 100vw;
            display: flex;
            align-items: center;
            .avatar {
                width: 26/360 * 100vw;
                height: 26/360 * 100vw;
                border-radius: 50%;
            }
            .name {
                font-size: 14/360 * 100vw;
                color: #888;
                padding-left: 10/360 * 100vw;
                flex: 1;
            }
        }
        .title {
            padding: 0 20/360 * 100vw;
            font-size: 16/360 * 100vw;
            color: #333;
            font-weight: 700;
        }
    }

    .btnFollow {
        font-size: 14/360 * 100vw;
        border: 1px solid #888;
        color: #333;
        line-height: 26/360 * 100vw;
        padding: 0 16/360 * 100vw;
        border-radius: 14/360 * 100vw;
        &.unfollow {
            background-color: #f00;
            color: #fff;
            border-color: red;
        }
    }

    .btns {
        display: flex;
        justify-content: space-around;
        padding: 26/360 * 100vw;
        .btn {
            border: 1px solid #888;
            font-size: 14/360 * 100vw;
            color: #333;
            line-height: 30/360 * 100vw;
            border-radius: 16/360 * 100vw;
            padding: 0 16/360 * 100vw;
        }
        .iconweixin {
            color: #01c801;
        }
        .haslike {
            color: red;
        }
    }
</style>